<template>
    <div class="uploader">
        <div class="uploader-item" v-if="type === 'add' || type === 'edit'">
            <div class="img_box2">
                <div v-for="(item, index) in fileListCopy" :key="index" :style="{width: imgWidth, height: imgWidth}">
                    <div @click="handleRemove(item, index)" class="delete_icon"><i class="el-icon-delete"></i></div>
                    <img :src="Url + (item.fileUrl?item.fileUrl:item.filePath)" alt="" srcset="">
                </div>
            </div>
            <el-upload
                :headers="headers"
                class="upload_box"
                :action="'/upload/bmfile/upload'"
                accept=".jpg,.jpeg,.png"
                :before-upload="beforeUpload"
                :show-file-list="false"
                :on-success="handleUploadSuccess"
                :disabled="loading"
                :on-error="onError">
                <div style="display:flex;">
                    <el-button :loading="loading" size="small" type="primary" style="margin-bottom:10px;height:32px;">点击上传</el-button>
                    <el-alert
                        :closable="false"
                        style="line-height: 20px;padding: 4px 16px;margin-bottom:10px;background-color: unset;"
                        title="单个文件不能超过10M!"
                        type="warning"
                        show-icon>
                    </el-alert>
                </div>
            </el-upload>
            
        </div>

        <div class="img_box" v-else>
            <div v-for="(li, liIndex) in fileListCopy" :key="liIndex" :style="{width: imgWidth, height: imgWidth}">
                <el-image :src="Url + (li.fileUrl?li.fileUrl:li.filePath)" :preview-src-list="[Url + (li.fileUrl?li.fileUrl:li.filePath)]"></el-image>
            </div>
        </div>
    </div>
</template>
<script>
import { Url } from '@/api/url'
export default {
    name:'upload',
    props:{
        type:{
            default:'',
        },
        fileList:{
            default:[],
        },
        imgWidth:{
            default: '120px',
        },
    },
    data(){
        return {
            loading:false,
            Url:Url,
            headers:{
                'Authorization': localStorage.getItem('token')
            },
            fileData:{},
            fileListCopy:[],
        }
    },
    watch:{
        fileList:{
            handler(){
                this.$nextTick(()=>{
                    this.fileListCopy = this.fileList
                })
            },
            deep:true,
            immediate: true
        },
    },
    methods:{
        handleUploadSuccess(res) {
            this.loading = false
            if(res.code != 200){
                this.$message.error(res.message)
            }else{
                this.fileListCopy.push(res.data)
            }
        },
        onError(err) {
            this.$message.error(err.message)
            this.loading = false
        },
        handleRemove(list, index) {
            this.fileListCopy.splice(index,1)
        },
        beforeUpload(file) {
            if(file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/jpeg') {
                this.$message.warning('请上传图片格式')
                return false
            }else{
                this.loading = true
            }
        },
    },
}
</script>
<style lang='scss' scoped>
.uploader {
    .item-label {
        font-weight: 600;
        width: 130px;
        line-height: 32px;
    }
    .uploader-item {
        display: flex;
        flex-wrap: wrap;
        .upload_box{
            width: 100%;
        }
    }
}
::v-deep .el-upload {
    text-align: left;
    display: flex;
}
.show-file {
    display: flex;
    align-items: flex-start;
    .linka {
        display: block;
        margin: 0 10px 10px 10px;
    }
}
.img_box{
    display: flex;
    flex-wrap: wrap;
    &>div{
        width: 120px;
        height: 120px;
        // background-color: pink;
        border-radius: 5px;
        overflow: hidden;
        margin: 0 20px 20px 0;
        cursor: pointer;
        .el-image{
            width: 100%;
            height: 100%;
        }
        ::v-deep .el-image__inner{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
.img_box2{
    display: flex;
    flex-wrap: wrap;
    &>div{
        width: 120px;
        height: 120px;
        margin-bottom: 10px;
        margin-right: 10px;
        border: 1px solid #DCDFE6;
        border-radius: 5px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover{
            .delete_icon{
                background-color: rgba(0,0,0,0.7);
                display: flex;
            }
        }
        .delete_icon{
            display: none;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            color: #fff;
            font-size: 20px;
            z-index: 1;
        }
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: pointer;
            
        }
    }
    
}
</style>